<template>
  <div class="workplace">
    <div class="workplace-header">
      <h1 class="workplace-title">工作台</h1>
    </div>

    <div class="workplace-content">
      <div class="input-section">
        <label class="input-label">输入内容：</label>
        <MyInput
          v-model="inputValue"
          placeholder="请输入内容（仅支持数字和字母）"
          maxlength="10"
          @input="handleInput"
          @blur="handleBlur"
        />
        <div class="input-display" v-if="inputValue">
          当前值: <span class="input-value">{{ inputValue }}</span>
        </div>
      </div>
    </div>
    <el-button @click="handleClick">点击</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import MyInput from '@/components/MyInput/index.vue'
import { debounce } from 'lodash'
import { delayedRequest, delayedRequests } from './utils'
const inputValue = ref('')

// 输入处理函数 - 只允许数字和字母
const handleInput = delayedRequest((value: string) => {
  console.log('输入值:', value)
  const filteredValue = value.replace(/[^\d\w]/g, '')
  inputValue.value = filteredValue
})
const number = ref(0)
const test = ()=>{
  // Promise.resolve().then(()=>{
    number.value++
    console.log('输入值:', number.value)

    // })
  }
const handleClick = delayedRequest(test(),2000)
// const handleClick = debounce((value: string) => {
//   number.value++
//   console.log('输入值:', number.value)
// }, 1300,{
//   leading: true,
//   trailing:true
// })
// 失焦处理函数
const handleBlur = (value: string) => {
  console.log('失焦时的值:', value)
  // 移除硬编码的值设置，保持用户输入的有效值
  if (!value.trim()) {
    inputValue.value = ''
  }
}
</script>
<style lang="scss" scoped>
.workplace {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 24px;

  &-header {
    margin-bottom: 32px;

    .workplace-title {
      font-size: 28px;
      font-weight: 600;
      color: #1f2937;
      margin: 0;
    }
  }

  &-content {
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    .input-section {
      max-width: 400px;

      .input-label {
        display: block;
        font-weight: 500;
        color: #374151;
        margin-bottom: 8px;
        font-size: 14px;
      }

      .input-display {
        margin-top: 12px;
        padding: 8px 12px;
        background-color: #f3f4f6;
        border-radius: 4px;
        font-size: 14px;
        color: #6b7280;

        .input-value {
          font-weight: 500;
          color: #1f2937;
        }
      }
    }
  }
}
</style>
